<template>
  <el-container>
    <el-aside width="200px">
      <CompanyMenu></CompanyMenu>
    </el-aside>
    <el-main>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark" style="height: 20px">面包屑</div></el-col>
      </el-row>
      <div v-for="apply in applyList" :key="apply.userinfoId">
        <el-descriptions class="margin-top" title="处理申请" :column="4" :size="4">
          <template #extra>
            <el-button type="primary" @click="agree(apply.id,apply.userinfoId)">同意</el-button>
            <el-button type="primary" @click="refuse(apply.id)">拒绝</el-button>
          </template>
          <el-descriptions-item label="昵称">{{apply.userinfo.nickname}}</el-descriptions-item>
          <el-descriptions-item label="姓名">
            <el-tag size="small">{{apply.userinfo.name}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="手机号">{{apply.userinfo.phone}}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{apply.userinfo.email}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <ApplyDialog ref="applyDialog"></ApplyDialog>
    </el-main>
  </el-container>
</template>

<script>
import CompanyMenu from "@/components/menu/CompanyMenu.vue";
import instanceToken from "@/utlis/tokenIdentify.js";
import ApplyDialog from "@/components/leader/department/ApplyDialog.vue";
export default {
  name: 'ApplyView',
  components: {
    CompanyMenu,
    ApplyDialog
  },
  data() {
    return {
      size:'',
      applyList:[]
    };
  },
  created() {
    this.initApply()
  },
  methods: {
    initApply(){
      instanceToken.get("/apply/leader/initApply").then(res =>{
        console.log(res.data.data)
        this.applyList = res.data.data;
      })
    },
    agree(id,userinfoId){
      this.$refs.applyDialog.distribution(id,userinfoId);
      this.$refs.applyDialog.show()
    },
    refuse(id){
      instanceToken.get("/apply/leader/refuse/"+id).then(res =>{
        this.initApply();
        if (res.data.success){
          this.$message({
            message: '已拒绝',
            type: 'success'
          });
        }else {
          this.$message({
            message: '页面出现错误，请刷新重试',
            type: 'success'
          });
        }
      })
    }

  },

}
</script>
<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>